<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox"/>
    <button @click="rev">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox"/>
        <span> {{item.name}} </span>
      </li>
    </ul>
  </div>
</template>

<script>
    /*
        需求1：小选影响全选
            1.1 使用v-for将arr数据动态渲染添加至页面-->给key属性绑定index
            1.2 给li中的元素进行双向绑定;复选框-->item.c
            1.3 想要通过小选状态影响全选,需要借助计算属性,给全选框双向绑定计算属性
            1.4 计算属性函数体中遍历arr,若arr.c均为true,则返回值为true;反之则为false

        需求2：全选影响小选
            2.1 将计算属性补全(设置set函数)
            2.2 在set函数的函数体中遍历arr,将所有的item.c赋值为set函数接收的参数
        
        需求3： 反选
            3.1 给反选按钮绑定点击事件
            3.2 遍历arr,将item.c的属性取反后重新赋值
    */ 
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  methods:{
      rev(){
          this.arr.forEach(item=>item.c=!item.c)
      }
  },
  computed:{
      isAll:{
         set(val){
             this.arr.forEach(item=>item.c=val)
         },
         get(){
              let flag = true
          this.arr.forEach(item=>{
              if(!item.c){flag = false}
          })
          return flag
         }
      }
  }
};
</script>